<script setup>
import {ArrowRight, MapLocation} from "@element-plus/icons-vue";
import { ElAvatar } from 'element-plus';
import {reactive, ref} from "vue";
import router from "@/router";


const data=reactive({
  employee:JSON.parse(localStorage.getItem('xm-pro-employee')),
  src:"avatar:require('../assets/avatar.jpg')",
  nickName:"无"
})

if(!localStorage.getItem('xm-pro-employee')){
  router.push('/Backend-login');
}else{
  data.src=data.employee.avatar
  data.nickName=data.employee.nickName
}

const updateEmployee = () => {
  data.employee=JSON.parse(localStorage.getItem('xm-pro-employee'))
  console.log(data.employee)
}

// 下拉点击效果
// 点击进入个人信息页
// 路由到/页面
const home =() =>{
  // 路由的push方法到/页面
  router.push('/');
}
const person =() =>{
  // 路由的push方法到/页面
  router.push('/Backend/employeePerson');
}
const password =() =>{
  // 路由的push方法到/页面
  router.push('/Backend/UpdatePassword');
}
const logout =() => {
  // 清除用户缓存
  localStorage.removeItem("xm-pro-employee");
  router.push('/backend-login');
}


</script>
<script>
export default {
  computed: {
    breadcrumbs() {
      let matched = this.$route.matched;
      let result = [];
      for (let record of matched) {
        if (record.meta && record.meta.breadcrumb) {
          result.push({
            text: record.meta.breadcrumb,
            to: record.path
          });
        }
      }
      return result;
    }
  }
}
</script>
<template>

  <ChildComponent />
  <div class="head-head" >
    <div class="head-left">
      <i>鲜花后台管理系统</i>
    </div>
    <div class="head-right">
<!--      下拉菜单的开始-->
      <el-dropdown style="display: contents" @updateEmployee="updateEmployee">
<!--        头像组件-->
          <el-avatar :size="35" :src="data.src" >
          </el-avatar>
<!--        下来菜单的内容-->
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="person">个人信息</el-dropdown-item>
            <el-dropdown-item @click="password">修改密码</el-dropdown-item>
            <el-dropdown-item @click="home">回到主页</el-dropdown-item>
            <el-dropdown-item @click="logout">退出系统</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div class="head-right">{{data.nickName}}</div>
  </div>

  <div class="head-mai">
    <el-icon style="float: left;margin-right: 10px" :size="18"><MapLocation/></el-icon>
<!--      <el-breadcrumb :separator-icon="ArrowRight">-->
<!--        <el-breadcrumb-item :to="{ path: '/' }" >首页</el-breadcrumb-item>-->
<!--        <el-breadcrumb-item>promotion management</el-breadcrumb-item>-->
<!--        <el-breadcrumb-item>promotion list</el-breadcrumb-item>-->
<!--        <el-breadcrumb-item>promotion detail</el-breadcrumb-item>-->
<!--      </el-breadcrumb>-->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item v-for="(breadcrumb, index) in breadcrumbs" :key="index">
        <router-link :to="breadcrumb.to">{{ breadcrumb.text }}</router-link>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<style scoped>
.head-head{
  height: 50px;
  //background-color: #0e0c0c;
  //margin-bottom: 10px;
  border-bottom: 1px solid #090909;
  margin-bottom: 2px;
}
.head-left{
  float: left;
  margin-left: 10px;
  margin-top: 10px;
  line-height: 30px;
  font-weight: bold;
}
.head-right{
  float: right;
  margin-right: 20px;
  margin-top: 10px;
}
.el-breadcrumb{
  font-size: 12px;
  line-height: 20px;
}
.head-mai{
  //border-radius: 10px;
  //background-color: #f8f8f8;
  margin-top: 6px;
  display: block;
  align-items: center;
  justify-content: space-between;
}

</style>